<template>
	<div>
		<div class="flex flex-col overflow-hidden h-[100%]">
			<div class="w-full p-3 bg-white flex justify-between items-center">
				<div>
					<span>{{ dashboardInfo.name || '标题' }}</span>
					<i class="iconfont icon-bianji text-[#1677ff] cursor-pointer" @click="edit"></i>
				</div>
				<div>
					<a-space>
						<a-button size="small" type="primary" @click="save">保存Ctrl+s</a-button>
						<a-button size="small" type="primary" @click="copyRoute">复制路由</a-button>
					</a-space>
				</div>
			</div>
			<div class="flex flex-1 overflow-hidden">
				<!-- 右侧面板 -->
				<div
					:class="rightPanelCollapsed ? 'w-[40px]' : 'w-[400px]'"
					class="bg-[#fff] overflow-hidden transition-all duration-300 ease-in-out relative"
				>
					<!-- 展开/收起按钮 -->
					<div class="absolute top-2 right-2 z-10">
						<a-button
							:title="rightPanelCollapsed ? '展开面板' : '收起面板'"
							class="flex items-center justify-center w-8 h-8 hover:bg-gray-100"
							size="small"
							type="text"
							@click="toggleRightPanel"
						>
							<RightOutlined v-if="rightPanelCollapsed" class="text-gray-600" />
							<LeftOutlined v-else class="text-gray-600" />
						</a-button>
					</div>

					<!-- 面板内容 -->
					<div
						:class="rightPanelCollapsed ? 'opacity-0 pointer-events-none' : 'opacity-100'"
						class="h-full transition-opacity duration-300"
					>
						<div class="overflow-y-auto h-full">
							<!-- 新增组件 -->
							<addComponent />
							<setComponent />
						</div>
					</div>

					<!-- 收起状态的提示 -->
					<div
						v-if="rightPanelCollapsed"
						class="absolute inset-0 flex flex-col items-center justify-center text-gray-400"
					>
						<i class="iconfont icon-biaoqian text-lg mb-1"></i>
						<span class="text-xs writing-mode-vertical">组件</span>
					</div>
				</div>

				<!-- 画布 -->
				<div class="flex-1 overflow-y-auto">
					<drawingCenter />
				</div>
			</div>
		</div>
		<pageSet ref="childRef"></pageSet>
	</div>
</template>

<script setup>
	import DrawingCenter from '@/views/plugin/dashboard/view/design/component/drawingCenter/index.vue'
	import AddComponent from '@/views/plugin/dashboard/view/design/component/addComponent/index.vue'
	import SetComponent from '@/views/plugin/dashboard/view/design/component/setComponent/index.vue'
	import PageSet from '@/views/plugin/dashboard/view/design/component/pageSet/index.vue'
	import { editDashboard, getDashboardDetail } from '@/views/plugin/dashboard/api/dashboardApi'
	import { designStore } from '@/views/plugin/dashboard/store'
	import { computed, onMounted, ref, watch } from 'vue'
	import { useRoute } from 'vue-router'
	import { message } from 'ant-design-vue'
	import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'

	// 注册图标组件
	const components = {
		LeftOutlined,
		RightOutlined
	}

	const childRef = ref(null)
	const useDesignStore = designStore()
	const route = useRoute()
	const showSetComponent = ref(false)
	const rightPanelCollapsed = ref(false)

	const isSelected = computed(() => {
		return !Object.keys(useDesignStore.selectedComponent)?.length
	})
	watch(
		() => useDesignStore.selectedComponent,
		(newVal) => {
			if (Object.keys(newVal || {}).length > 0) {
				showSetComponent.value = true
			}
		}
	)

	// 仪表盘信息
	const dashboardInfo = ref({
		name: '',
		updateTime: ''
	})
	const copyRoute = () => {
		const { id } = route.query
		if (id) {
			const url = window.location.origin + '/dashboard/show?id=' + id
			navigator.clipboard.writeText(url)
			message.info('已复制')
		}
	}
	// 获取仪表盘详情
	const getDashboardInfo = async () => {
		const { id } = route.query
		if (id) {
			const res = await getDashboardDetail({ id })
			try {
				const sourceData = JSON.parse(res.dsConfig)
				if (Array.isArray(sourceData.canvasSourceData)) {
					useDesignStore.canvasSourceData = sourceData.canvasSourceData
				} else {
					useDesignStore.canvasSourceData = []
				}
			} catch (error) {
				console.log('error', error)
				useDesignStore.canvasSourceData = []
			}
			dashboardInfo.value = res
		}
	}
	// 切换右侧面板展开/收起状态
	const toggleRightPanel = () => {
		rightPanelCollapsed.value = !rightPanelCollapsed.value
	}

	// 编辑仪表盘信息
	const edit = () => {
		childRef.value.showDrawer()
	}

	// 保存仪表盘
	const save = () => {
		// 下拉数据
		const { id } = route.query
		console.log(useDesignStore.canvasSourceData)
		editDashboard({
			...dashboardInfo.value,
			dsConfig: JSON.stringify({
				...JSON.parse(dashboardInfo.value.dsConfig),
				canvasSourceData: useDesignStore.canvasSourceData
			}),
			id: id
		}).then((res) => {
			getDashboardInfo()
		})
	}
	// 页面加载时获取仪表盘详情
	onMounted(() => {
		useDesignStore.getDataSource()
		getDashboardInfo()
		useDesignStore.mode = 'design'
	})
</script>
<style scoped lang="less">
	:deep(.ant-card-body) {
		padding: 0 24px 0 24px;
	}

	:deep(.ant-drawer-body) {
		color: #000000; // 修改字体颜色为黑色
	}

	// 垂直文字样式
	.writing-mode-vertical {
		writing-mode: vertical-rl;
		text-orientation: mixed;
	}

	// 右侧面板过渡动画优化
	.transition-all {
		transition-property: width, opacity, transform;
	}

	// 确保按钮在收起状态下可见
	.absolute.top-2.right-2 {
		transition: right 0.3s ease-in-out;
	}
</style>
